/**
 * 实现自定义元素
 */

class WordCount extends HTMLParagraphElement {
  static observedAttributes = ['name'];

  constructor() {
    super();
  }

  connectedCallback() {
    console.log('当元素添加到了文档的时候被调用');
  }
  disconnectedCallback() {
    console.log('元素从文档中移除');
  }
  adoptedCallback() {
    console.log('元素被移动到新文档中被调用');
  }
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(
      `属性 ${name} 已变更。oldValue=${oldValue}, newValue=${newValue}`
    );
  }
}
// 注册自定义元素
customElements.define('word-count', WordCount, { extends: 'p' });

/**
 * 实现独立元素
 */

class PopupInfo extends HTMLElement {
  static observedAttributes = ['size'];

  constructor() {
    super();
  }
  connectedCallback() {
    // 创建影子根
    const shadow = this.attachShadow({ mode: 'open' });
    const span = document.createElement('span');
    // 获取 size 属性
    const size = this.getAttribute('size');
    span.textContent = `我是一个span元素。size=${size}`;
    shadow.appendChild(span);
  }
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}。`);
  }
}

customElements.define('popup-info', PopupInfo);
